<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:replace="fragments/custom_base::commonHead"></th:block>
    <th:block th:replace="fragments/custom_link::pear-css"></th:block>
    <link rel="stylesheet" href="/css/other/form.css" />
    <link rel="stylesheet" href="/libs/editor/css/editormd.min.css" />
    <style>
    </style>
</head>
<body>
<div class="formBox">
    <form action="" class="layui-form">
        <div class="mainBox">
            <div class="main-container">
                <div class="main-container">
                    <input type="hidden" name="id" th:value="${webNav.id}">
                    <input type="hidden" name="cid" th:value="${webNav.cid}">
                    <div class="layui-form-item">
                        <label class="layui-form-label">所属父级</label>
                        <div class="layui-input-block">
                            <select name="pid" id="topMenuSelect" lay-filter="topMenuSelect">
                                <option value="0">顶级导航</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">导航类型</label>
                        <div class="layui-input-block">
                            <input th:checked="${webNav.type eq 1}" lay-filter="isType" name="type" title="图文" type="radio" value="1">
                            <input th:checked="${webNav.type eq 2}" lay-filter="isType" name="type" title="链接" type="radio" value="2">
                        </div>
                    </div>

                    <div class="layui-form-item" >
                        <label class="layui-form-label">导航名称</label>
                        <div class="layui-input-block">
                            <input autocomplete="off" lay-verify="required" class="layui-input"  name="name" placeholder="导航名称"
                                   th:value="${webNav.name}"
                                   type="text">
                        </div>
                    </div>

                    <div class="layui-form-item" >
                        <label class="layui-form-label">关键词</label>
                        <div class="layui-input-block">
                            <input autocomplete="off" lay-verify="required" class="layui-input"  name="keywords" placeholder="用于seo展示的关键词信息，多个以，号隔开。"
                                   th:value="${webNav.keywords}"
                                   type="text">
                        </div>
                    </div>

                    <div class="layui-form-item" >
                        <label class="layui-form-label">描述信息</label>
                        <div class="layui-input-block">
                            <textarea name="description" th:text="${webNav.description}" placeholder="用于seo使用的描述信息，不超过200字！"  class="layui-textarea" maxlength="255"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item" >
                        <label class="layui-form-label">图文内容</label>
                        <div class="layui-input-block">
                            <div id="markdownEditor"><textarea style="display:none;" th:text="${webNav.content}"></textarea></div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">导航路径</label>
                        <div class="layui-input-block">
                            <input autocomplete="off" class="layui-input" name="path" placeholder="填写路径并设置类型为链接启用此项"
                                   th:value="${webNav.path}"
                                   type="text">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">可用状态</label>
                        <div class="layui-input-block">
                            <input th:checked="${webNav.enable eq 1}" lay-filter="isEnable" name="enable" title="启用" type="radio" value="1">
                            <input th:checked="${webNav.enable eq 0}" lay-filter="isEnable" name="enable" title="禁用" type="radio" value="0">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-block">
                            <input autocomplete="off" class="layui-input" lay-verify="required" name="sort" placeholder="排序，越小越靠前~" value="0"
                                   th:value="${webNav.sort}"
                                   type="number">
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="formBoxBottom">
            <div class="button-container">
                <button class="layui-btn layui-btn-primary layui-btn-sm" lay-filter="nav-save" lay-submit="" type="submit">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button class="layui-btn layui-btn-sm" type="reset">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </div>
    </form>
</div>

<th:block th:replace="fragments/custom_link::pear-js"></th:block>
<th:block th:replace="fragments/custom_link::custom-js"></th:block>
<script src="/libs/editor/editormd.min.js"></script>
<script th:inline="javascript">
    layui.use(['form', 'jquery','popup'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let popup = layui.popup;
        let MODULE_PATH = "/admin/nav/";
        let cid = /*[[${webNav.cid}]]*/ 0;
        let pid = /*[[${webNav.pid}]]*/ 0;
        var editor = editormd("markdownEditor", {
            width: "100%",
            height: 500,
            path : "/libs/editor/lib/",
            // 图片上传配置
            imageUpload: true,          // 开启图片上传功能
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],  // 支持的图片格式
            imageUploadURL: "/editor_upload",  // 图片上传的服务器地址
            // 允许复制粘贴图片自动上传
            pasteImage: true,
            catchRemoteImageEnable:true,//抓取远程图片
            onload: function () {
                initPasteDragImg(this); //必须
            }
        });
        //加载select
        getSelect(MODULE_PATH+"get_top_menu?cid="+cid, 'topMenuSelect',pid, function() {
            console.log('加载成功');
            form.render("select");
        }, function() {
            popup.failure('加载失败，请检查网络');
        });
        form.on('submit(nav-save)', function (data) {
            data.field.content = editor.getMarkdown();
            $.ajax({
                url: MODULE_PATH+'update',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    if (result.status==200) {
                        layer.msg(result.message, {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                            parent.layui.form.submit('NavChildRefresh');
                        });
                    } else {
                        layer.msg(result.message, {icon: 2, time: 1000});
                    }
                }
            })
            return false;
        });
    })
</script>
<script>
</script>
</body>
</html>